<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>

    var ulObj = document.getElementById('ul')
    var liObj = ulObj.children

    var liNodes = ulObj.childNodes
    console.log(liNodes)
    

// for(var i=0;i<liObj.length;i++){
//     if(i%2 == 0){
//         liObj[i].style.backgroundColor = 'red'
//     }else{
//         liObj[i].style.backgroundColor = 'yellow'
//     }
// }

//通过节点的方式来实现隔行变色的效果
var count = 0;//记录有多少个li标签
for(var i=0;i<liNodes.length;i++){
    if(liNodes[i].nodeType ==1 && liNodes[i].nodeName == 'LI'){
        count++;
        if(count%2 ==0){
            liNodes[i].style.backgroundColor ='red'  
        }else{
            liNodes[i].style.backgroundColor ='yellow'  
        }
    }
}

    </script>
</body>
</html>